<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>角色管理</span>
          <el-button
            v-permission="'system:role:add'"
            type="primary"
            size="small"
            @click="handleAddRole"
          >
            新增角色
          </el-button>
        </div>
      </template>
      
      <!-- 角色列表 -->
      <el-table :data="roleList" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="角色名称" width="180" />
        <el-table-column prop="code" label="角色编码" width="180" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="scope">
            <el-button
              v-permission="'system:role:edit'"
              type="primary"
              size="small"
              @click="handleEditRole(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-permission="'system:role:permission'"
              type="warning"
              size="small"
              @click="handlePermission(scope.row)"
            >
              权限分配
            </el-button>
            <el-button
              v-permission="'system:role:delete'"
              type="danger"
              size="small"
              @click="handleDeleteRole(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size